<template>
  <div class="project-design flex-column" v-loading="loading">
    <el-form label-position="top" :model="form" :rules="rules" :label-width="100">
      <el-form-item label="团队名称" prop="user">
        <el-input v-model="form.user" :maxlength="50" placeholder="请输入团队名称"></el-input>
      </el-form-item>
      <el-form-item label="分配账号" prop="username">
        <el-input v-model="form.username" :maxlength="50" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="账号密码" prop="password">
        <el-input v-model="form.password" :maxlength="50" placeholder="请输入账号密码"></el-input>
      </el-form-item>

      <el-form-item label="部门层级" prop="auth">
        <el-cascader class="width-100" v-model="form.auth" :options="treeSelectData" :props="props" placeholder="请选择"></el-cascader>
      </el-form-item>
      <div class="form-action text-center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";

export default {
  extends: BaseComponent,
  name: "ProjectDesign",

  props: ["design"],
  emits: ["close"],
  data() {
    return {
      loading: false,
      form: this.design || {},
      rules: [],
      props: { checkStrictly: true, value: "value", label: "name", children: "children" }
    };
  },
  computed: {
    treeSelectData() {
      return [
        {
          name: "主管部门",
          value: "主管部门",
          children: [{ name: "四川省", value: "四川省", children: [{ name: "成都市", value: "成都市" }] }]
        },
        {
          name: "参建单位",
          value: "参建单位",
          children: [{ name: "监理单位", value: "监理单位" }]
        }
      ];
    }
  },
  created() {
    // this.getData();
  },

  methods: {
    cancel() {
      this.$emit(`close`);
    },
    save() {
      this.loading = true;
      this.$g.ajax.$api("project.save", this.form).then((result) => {
        console.log("[project.save]", this.form, result);
        this.loading = false;
        this.$g.toast(result.message, result.code == 0 ? "success" : "error");
        this.cancel();
      });
    }
  }
};
</script>
<style>
.project-design {
}
</style>
